<template lang="html">
  <section class='index'>
    <el-col :span="20" class="background" style="width:100%; height:calc(100vh);display:flex;">
      <div class="vertical-center">
        <div style="z-index:10;" class="auth-form">
          <div class="title">小安树管理后台
            <!-- <span style="font-size:15px;">V1.0</span> -->
          </div>
          <register ref="register" v-if="mode == true"></register>
          <login ref="login" v-if="mode == false"></login>
          <el-button type="primary" @click.native.prevent="handleSubmit" :loading="loading" :class="{ 'register-color': mode }" class="submit">
            {{ buttonLabel[0] }}
          </el-button>
          <!-- <el-button type="primary" @click.native.prevent="handleTurn" :class="{ 'register-color': !mode }" class="turn">
            {{ buttonLabel[1] }}
          </el-button> -->
        </div>
      </div>
      <!--注册 -->
      <el-dialog title="账号注册" :visible.sync="registerDialogVisible" @close="closeBefore" close-on-press-escape :close-on-click-modal="true"
        :modal="false" class="registerGroupDialog" width="600px">
        <el-form ref="registerUserform" status-icon :rules="registerUserRule" :model="registerUserform" label-width="160px" v-if="showPassword">
          <el-form-item label="电话：" prop="phone" required>
            <el-input v-model="registerUserform.phone"></el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="password" required>
            <el-input type="password" v-model="registerUserform.password"></el-input>
          </el-form-item>
          <el-form-item label="再次输入密码：" prop="repeatPassword" required>
            <el-input type="password" v-model="registerUserform.repeatPassword"></el-input>
          </el-form-item>
          <el-form-item label="验证码：" prop="captcha" required>
            <div style="text-align:left;">
              <el-input type="text" v-model="registerUserform.captcha" auto-complete="off" placeholder="验证码" size="medium" style="width:50%;"></el-input>
              <el-button @click='getCaptcha'>获取验证码</el-button>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" @click="nextStep">提交</el-button>
          </el-form-item>
        </el-form>
        <span v-if="!showPassword" style="display:block;margin-top:60px;">账号注册成功!</span>
      </el-dialog>
    </el-col>
    <canvas id="evanyou-canvas" width="1920" height="949" style="position: absolute; top: 0px; left: 0px; z-index: 0; width: 100%; pointer-events: none;"></canvas>
  </section>
</template>

<script>
  import {
    mapGetters
  } from "vuex";
  import evanyou from "../../../static/jsFile/evanyou.js";
  import config from "../../../static/config.js";
  import {
    get,
    post,
    common,
    getRefresh
  } from "../../api/api";

  export default {
    components: {
      Login: () =>
        import ("./Login.vue"),
      Register: () =>
        import ("./Register.vue")
    },
    data() {
      var checkUsername = (rule, value, callback) => {
        if (!value) {
          callback(new Error("请输入用户名"));
        } else if (value.match(/^1[34578]\d{9}$/g) == null) {
          callback(new Error("必须手机号码!"));
        } else {
          callback();
        }
      };
      var checkPassword = (rule, value, callback) => {
        if (!value) {
          callback(new Error("请输入密码"));
        } else if (value.length < 6 || value.length > 12) {
          callback(new Error("必须6-12个字符!"));
        } else {
          callback();
        }
      };
      var checkRepeatPassword = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== this.registerUserform.password) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      };
      var checkCaptcha = (rule, value, callback) => {
        if (!value) {
          callback(new Error("请输入验证码"));
        } else {
          callback();
        }
      };
      return {
        mode: false,
        buttonLabel: ["登录", "注册"],
        registerDialogVisible: false,
        showPassword: true,
        registerUserform: {
          phone: "",
          password: "",
          repeatPassword: "",
          captcha: ""
        },
        registerUserRule: {
          phone: [{
            validator: checkUsername,
            trigger: "blur"
          }],
          password: [{
            validator: checkPassword,
            trigger: "blur"
          }],
          repeatPassword: [{
            validator: checkRepeatPassword,
            trigger: "blur"
          }],
          captcha: [{
            validator: checkCaptcha,
            trigger: "blur"
          }]
        }
      };
    },
    computed: {
      ...mapGetters({
        loading: "getAuthLoading"
      })
    },
    methods: {
      handleSubmit() {
        //this.$store.commit("set_auth_loading", true);
        if (this.mode) this.$refs.register.handleSubmit();
        else this.$refs.login.handleSubmit();
      },
      //--------账号注册----------
      handleTurn() {
        // this.mode = !this.mode;
        this.registerDialogVisible = true;
      },
      closeBefore() {
        this.$refs.registerUserform.resetFields();
      },
      getCaptcha() {
        this.$refs.registerUserform.validateField("phone", valid => {
          if (!valid) {
            post("common/captcha", {
              username: this.registerUserform.phone,
              type: 0
            }).then(resdata => {
              let self = function () {
                getRefresh(this.getCaptcha);
              }.bind(this);
              let error = function () {
                alert(resdata.msg);
              }.bind(this);
              let success = function () {
                console.log(resdata);
                alert(resdata.msg);
              }.bind(this);
              common(self)(error)(success)(resdata);
            });
          } else {
            alert("请输入手机号!!");
            return false;
          }
        });
      },
      nextStep() {
        this.$refs.registerUserform.validate(valid => {
          if (valid) {
            let param = {};
            param.username = this.registerUserform.phone;
            param.password = this.registerUserform.password;
            param.captcha = this.registerUserform.captcha;
            post("common/register", param).then(resdata => {
              let self = function () {
                getRefresh(this.nextStep);
              }.bind(this);
              let error = function () {
                alert(resdata.msg);
              }.bind(this);
              let success = function () {
                console.log(resdata);
                alert(resdata.msg);
                this.showPassword = fasle;
                this.registerDialogVisible = fasle;
              }.bind(this);
              common(self)(error)(success)(resdata);
            });
          } else {
            alert("error submit!!");
            return false;
          }
        });
      }
    },
    mounted() {
      // bgmove();
      evanyou();
    },
    watch: {
      mode(val) {
        this.buttonLabel.reverse();
      }
    }
  };

</script>

<style lang="scss">
  .index {
    .el-col {
      height: 50vh;
    }
    .background {
      // background-image: url(../../assets/nav.jpeg);
      /* background-size: cover; */
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
    }
    .vertical-center {
      /* margin-top: calc((50vh - 30px) / 2); */
      width: 400px;
      height: 420px;
      margin: 0 auto;
      position: relative;
    }
    .submit {
      width: 180px;
      border: 0;
    }
    .turn {
      margin-left: 5px;
      border: 0;
    }
    .register-color {
      background: #66c799;
    }
    .register-color:hover {
      background: #71deaa;
    }
    img {
      weight: auto;
      position: absolute;
      top: 2px;
      user-select: none;
    }
    .auth-form {
      width: 400px;
      height: 420px;
      box-shadow: 2px 5px 15px 0 rgba(0, 0, 0, 0.5);
      position: absolute;
    }
    .vertical-center::before {
      content: "";
      display: block;
      background: #000;
      opacity: 0.5;
      width: 400px;
      height: 420px;
      position: absolute;
      top: 0px;
    }
    .login-height {
      height: 35vh;
    }
    a {
      font-size: 1.6rem;
      color: #c7c7c7;
      text-decoration: none;
      position: relative;
    }
    a:hover {
      color: #fff;
    }
    .title {
      padding-top: 30px;
      color: white;
      font-size: 4rem;
      font-family:serif;
    }
    .registerGroupDialog {
      .el-dialog {
        box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
        border-radius: 5px;
        margin-top: 30vh !important;
        .el-dialog__header {
          text-align: left;
          .el-dialog__title {
            font-family: "Roboto", sans-serif;
            color: #7d7d7d;
            font-size: 15px;
          }
        }
        .el-dialog__body {
          min-height: 246px;
          .el-form {
            padding-left: 40px;
            .el-form-item {
              width: 80%;
              .el-form-item__content {
                text-align: left;
              }
              .el-form-item__label {
                padding: 0 24px 0 0;
                color: #333;
                font-weight: 400;
                font-size: 13px;
              }
            }
          }
        }
      }
    }
  }

</style>
